<template>
  <div class='content'>
    <div class="item item1">
      <img src="../assets/cardLogo1.png" alt="">
    </div>
    <div class="item item2">
      <img src="../assets/cardLogo2.png" alt="">
    </div>
  </div>
</template>

<script>
  export default {
    
  }
</script>

<style lang="scss" scoped>
.content{
  padding:12px 16px;
  height: 100vh;
  box-sizing: border-box;
  .item{
    position: relative;
    width:100%;
    height:170px;
    background-repeat: no-repeat;
    margin-bottom: 15px;
    background-size: 100% auto;
    &:last-child{
      margin-bottom: 0;
    }
    &.item1{
      background-image: url('../assets/card1.png');
    }
    &.item2{
      background-image: url('../assets/card2.png');
    }
    img{
      position: absolute;
      top:24px;
      left:42px;
      width:35px;
      height:35px;
    }
  }
}
</style>